<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-09 14:05:57
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-11 17:06:26
 * @FilePath: \project-my\nuxt3-app-pro\layouts\default.vue
 * @Description: 
-->
<template>
    <div>
        {{ $t('message') }}
        <div class="language">
            <el-select v-model="locale" placeholder="Select" size="small" @change="changeLocale">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <slot />
    </div>
</template>

<script lang="ts" setup>
const { locale, t } = useI18n()
const options = [
    { value: 'zh', label: '简体' },
    { value: 'en', label: 'English' },
]

onMounted(() => {
    const lang = localStorage.getItem('lang_locale')
    if (lang && ['zh', 'en'].includes(lang)) {
        locale.value = lang as 'zh' | 'en'
    }
})
const changeLocale = (val: string) => {
    localStorage.setItem('lang_locale', val)
}


// function useI18n(): { locale: any; t: any; } {
//     throw new Error('Function not implemented.');
// }
</script>

<style lang="scss" scoped>
.language {
    position: absolute;
    right: 6px;
    top: 2px;

    .el-select {
        width: 80px;
    }
}
</style>